<template>
  <div id="coursesTable"></div>
</template>

<script>
import Timetables from '.././Timetables'

export default{
  data() {
    return {
      classs:[],
      timetableType: [
        [{index: '1',name: '8:30'}, 1],
        [{index: '2',name: '10:00'}, 1],
        [{index: '3',name: '10:15'}, 1],
        [{index: '4',name: '11:45'}, 1],
        [{index: '5',name: '14:30'}, 1],
        [{index: '6',name: '16:00'}, 1],
        [{index: '7',name: '16:15'}, 1],
        [{index: '8',name: '17:45'}, 1],
        [{index: '9',name: '19:00'}, 1],
        [{index: '10',name: '20:30'}, 1],
      ],
      week: ['周一', '周二', '周三', '周四', '周五','周六','周日'],
      timetable: null,
    }
  },

  created(){
    this.classs = this.$store.getters.getTeacherClass
    // console.log(this.classs)
  },

  mounted(){
    this.$nextTick(function () {
      this.timetable = new Timetables({
        el: "#coursesTable",
        timetables: this.classs,
        week: this.week,
        timetableType: this.timetableType,
        highlightWeek: new Date().getDay(),
        styles: {
          Gheight: 50
        }
      })
    });
  },

}
</script>

<style>
#coursesTable {
  padding: 15px 10px;
}

.Courses-head {
  background-color: #edffff;
}

.Courses-head > div {
  text-align: center;
  font-size: 14px;
  line-height: 28px;
}

.left-hand-TextDom, .Courses-head {
  background-color: #f2f6f7;
}

.Courses-leftHand {
  background-color: #f2f6f7;
  font-size: 12px;
}

.Courses-leftHand .left-hand-index {
  color: #9c9c9c;
  margin-bottom: 4px !important;
}

.Courses-leftHand .left-hand-name {
  color: #666;
}

.Courses-leftHand p {
  text-align: center;
  font-weight: 900;
}

.Courses-head > div {
  border-left: none !important;
}

.Courses-leftHand > div {
  padding-top: 5px;
  border-bottom: 1px dashed rgb(219, 219, 219);
}

.Courses-leftHand > div:last-child {
  border-bottom: none !important;
}

.left-hand-TextDom, .Courses-head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.Courses-content > ul {
  border-bottom: 1px dashed rgb(219, 219, 219);
  box-sizing: border-box;
}

.Courses-content > ul:last-child {
  border-bottom: none !important;
}

.highlight-week {
  color: #02a9f5 !important;
}

.Courses-content li {
  text-align: center;
  color: #666666;
  font-size: 14px;
  line-height: 50px;
}

.Courses-content li span {
  padding: 6px 2px;
  box-sizing: border-box;
  line-height: 18px;
  border-radius: 4px;
  white-space: normal;
  word-break: break-all;
  cursor: pointer;
}

.grid-active {
  z-index: 9999;
}

.grid-active span {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
</style>
